<template>
  <div class="home">
		<div class="home-main">
			<BookSort></BookSort>
			<div style="width: 30%; height: auto; flex-grow: 0.5;">
				<ScrollPictures></ScrollPictures>
			</div>
			
			<HotBooks>
				
			</HotBooks>
			
		</div>
		<div>
			<NewBooks>
			  
			</NewBooks>
		</div>

  </div>
</template>

<script>
	import BookSort from '@/components/Home/Middle/BookSort.vue'
	import NewBooks from '@/components/Home/NewBooks.vue'
	import ScrollPictures from '@/components/Home/Middle/ScrollPictures.vue'
	import HotBooks from '@/components/Home/Middle/HotBooks.vue'

export default {
  name: 'Home',
  components: {
    BookSort,
    NewBooks,
		ScrollPictures,
		HotBooks
  }
}
</script>

<style>
	.home {
		width: 100%;
	}
	.home-main {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 0 auto;
		margin-top: 3rem;
	}
</style>
